<ng-container *ngIf="loading">
  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
  <omv-alert-panel type="info">
    {{ "Please wait, the data is being loaded ..." | translate }}
  </omv-alert-panel>
</ng-container>
<omv-alert-panel *ngIf="error && !loading"
                 type="error">
  {{ error | httpErrorResponse:'message' }}
</omv-alert-panel>
<mat-card [ngClass]="{'omv-display-none': loading || error}">
  <ng-container *ngTemplateOutlet="renderCardHeader"></ng-container>
  <mat-card-content>
    <omv-intuition-form [id]="config.id"
                        [config]="config.fields"
                        [context]="pageContext">
    </omv-intuition-form>
  </mat-card-content>
  <mat-card-actions *ngIf="config.buttons.length"
                    fxLayout="row"
                    [fxLayoutAlign]="config.buttonAlign">
    <ng-container *ngFor="let button of config.buttons">
      <omv-submit-button *ngIf="button.template === 'submit'"
                         [form]="config.id"
                         [formGroup]="form.formGroup"
                         [disabled]="button.disabled || (editing && form.formGroup.pristine)"
                         (buttonClick)="onButtonClick(button)">
        {{ button.text | translate }}
      </omv-submit-button>
      <button *ngIf="button.template !== 'submit'"
              mat-flat-button
              [class]="button.class"
              [disabled]="button.disabled"
              (click)="onButtonClick(button)">
        {{ button.text | translate }}
      </button>
    </ng-container>
  </mat-card-actions>
</mat-card>

<ng-template #renderCardHeader>
  <ng-container *ngIf="config.title || config.subTitle">
    <ng-container *ngIf="config.icon">
      <mat-card-header>
        <mat-icon mat-card-avatar
                  svgIcon="{{ config.icon }}">
        </mat-icon>
        <mat-card-title *ngIf="config.title">
          {{ config.title }}
        </mat-card-title>
        <mat-card-subtitle *ngIf="config.subTitle">
          {{ config.subTitle }}
        </mat-card-subtitle>
      </mat-card-header>
    </ng-container>
    <ng-container *ngIf="!config.icon">
      <mat-card-title-group>
        <mat-card-title *ngIf="config.title">
          {{ config.title }}
        </mat-card-title>
        <mat-card-subtitle *ngIf="config.subTitle">
          {{ config.subTitle }}
        </mat-card-subtitle>
      </mat-card-title-group>
    </ng-container>
  </ng-container>
</ng-template>
